<template>

  <view :class="$style.command_container" class="relative">
    <view :class="$style.title">{{ titleName }}</view>

    <view :class="$style.command_group" class="flex">
      <image :src="stationImg" alt="" />
      <view :class="$style.command_group_title">指挥中心</view>
      <image :src="phoneImg" @click="callUpToPhone(commandInfo.zhzxTxzbsDh || '')" />
    </view>


    <view :class="$style.command_group" class="flex">
      <image :src="stationImg" alt="" />
      <view :class="$style.command_group_title">{{ commandInfo.jgjc }}</view>
      <image :src="phoneImg" @click="callUpToPhone(commandInfo.lxfs || '')" />
      <view :class="$style.state" v-show="commandInfo.zzztdm">{{ getAlertState(commandInfo.zzztdm) }}</view>
    </view>

  </view>

</template>

<script setup lang='ts'>
import { ref } from "vue";
import phoneImg from "@/static/images/alert-detail/phone.png";
import stationImg from "@/static/images/alert-detail/station.png";
import { callUpToPhone } from '@/utils';
import { alertState } from "@/static";
interface Props {
  commandInfo: any
};
const {
  commandInfo = {},
} = defineProps<Props>();
const titleName = ref<string>("组织指挥");
function getAlertState(state: string) {
  return alertState[state];
}

// const commandInfo = ref<any>({
//   name: "王强",
//   station: "夫子庙站",
//   state: "站指挥",
//   mode: "指挥长模式",
// });
</script>

<style lang='less' module>
.command_container {
  width: calc(100% - 60rpx);
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  padding: 10rpx 10rpx 10rpx 20rpx;
  border-radius: 20rpx;
  font-family: Microsoft YaHei;

  .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }

  .command_content {
    margin: 25rpx 0 30rpx 60rpx;

    .info {
      margin-left: 20rpx;
      font-weight: 400;

      .name {
        color: #333333;
        font-size: 30rpx;
      }

      .station {
        color: #999999;
        font-size: 26rpx;
      }

      .state {
        height: 30rpx;
        background: #375ce4;
        border-radius: 8rpx;
        line-height: 30rpx;
        font-size: 22rpx;
        color: #ffffff;
        text-align: center;
        padding: 5rpx 15rpx;
      }
    }
  }

  .mode {
    top: 17rpx;
    right: 45rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: #333333;

  }

  .mode_name {
    width: 100%;
    text-align: center;
  }

  .command_group {
    font-size: 26rpx;
    font-weight: 400;
    // justify-content: space-between;
    color: #999999;
    margin: 20rpx 0;
    align-items: flex-end;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    .state {
      background: #00d195;
      border-radius: 8rpx;
      padding: 5rpx 10rpx;
      font-size: 22rpx;
      color: #ffffff;
      margin: 0 0rpx 0 27rpx;
    }

    .command_group_title {
      width: 444rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  }
}
</style>
